<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>翻译</title>
		<style>
			.mb-15 {
				margin-bottom: 15px;
			}

			.fs-20 {
				font-size: 20px;
			}

			.color-primary {
				color: rgb(13, 110, 253);
			}

			.border {
				border: 2px solid rgb(13, 110, 253);
				padding: 2px 5px;
				text-align: justify;
				border-radius: 10px;
			}
		</style>
	</head>
	<body>
		<div class="mb-15 fs-20">
			<label for="text">输入文字：</label>
			<input type="text" id="text" class="fs-20">
		</div>
		<div class="fs-20">
			<span>翻译结果：</span>
			<span id="result" class="color-primary"></span>
		</div>
		<script>
			let ele = document.getElementById('text')
			let eleHead = document.getElementsByTagName('head')[0]
			let eleResult = document.getElementById('result')
			ele.addEventListener('keyup', function() {
				let text = ele.value
				eleResult.innerHTML = '...'
				eleResult.classList.remove('border')
				if (text) {
					let node = document.createElement('script')
					node.src = 'https://sp1.baidu.com/5b11fzupBgM18t7jm9iCKT-xh_/sensearch/selecttext?cb=showResult&q=' +
						encodeURIComponent(text)
					eleHead.appendChild(node)
				} else {
					eleResult.innerHTML = ''
					eleResult.classList.remove('border')
				}
			})

			function showResult(data) {
				let result = data.data.result
				eleResult.innerHTML = result
				eleResult.classList.add('border')
			}
		</script>
	</body>
</html>